<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:46
 * @Description: 价格产销库存
-->
<template>
  <com-box
    :title="data.title"
    :class="[data.visible ? 'mask' : '']"
    rightUnit="万千瓦时"
    leftUnit="元/千瓦时"
  >
    <template v-slot>
      <div class="nav">
        <div class="box-bar echart-item">
          <div class="jgdb-unit">{{ data.unit }}</div>
          <!-- <charts class="line-chart" :params="data.params"></charts> -->
          <div ref="chart" style="width: 100%; height: 240px"></div>
        </div>
      </div>
    </template>
  </com-box>
</template>
<script lang="ts" setup>
import comBox from '@/components/comBox/comBox.vue'
import { getOption4 } from './components/option'
import * as echarts from 'echarts'
import {
  defineComponent,
  reactive,
  onMounted,
  onBeforeUnmount,
  ref,
  watch,
  toRefs,
  defineExpose,
  defineEmits
} from 'vue'
import httpRequest from '@/service'
const emits = defineEmits(['change'])
const chart = ref(null)
let myChart: any
const getData = () => {
  const dom = chart.value
  if (dom) {
    if (myChart !== null && myChart !== '' && myChart !== undefined) {
      myChart.dispose()
    }
    myChart = echarts.init(dom)
  }
  let option = getOption4()
  data.params.loading = true
  httpRequest
    .get({ url: 'M2P2BFHYDLDJ', params: { classId: '售电企业电量电价' } })
    .then((res) => {
      if (res.code == 200 && Object.keys(res.map).length > 0) {
        res.map = {
          value1: '一般工商业',
          value2: '居民',
          value3: '农业'
        }
        option.legend.data = Object.values(res.map)
        option.series[0].data = res.data.map((i: { value4: any }) => {
          return i.value4
        })
        option.series[1].data = res.data.map((i: { value5: any }) => {
          return i.value5
        })
        option.series[2].data = res.data.map((i: { value6: any }) => {
          return i.value6
        })
        option.series[3].data = res.data.map((i: { value1: any }) => {
          return i.value1
        })
        option.series[4].data = res.data.map((i: { value2: any }) => {
          return i.value2
        })
        option.series[5].data = res.data.map((i: { value3: any }) => {
          return i.value3
        })
        option.xAxis[0].data = res.data.map((i: { name: any }) => {
          return i.name
        })
        data.title = res.title
        myChart.setOption(option)
      }
    })
    .catch(() => {
      console.log('请求失败')
    })
}
const data: any = reactive({
  visible: false,
  title: '',
  unit: '',
  params: {
    loading: true,
    height: '240px',
    map: {},
    options: {
      dataset: {
        dimensions: [],
        source: []
      },
      title: {
        show: false,
        text: '',
        left: '20',
        top: '10',
        textStyle: {
          fontSize: 18,
          fontFamily: 'Microsoft YaHei',
          color: 'rgba(162, 199, 255,1)'
        }
      },
      legend: {
        right: 0,
        top: 0,
        width: '70%'
      },
      // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
      xAxis: [
        {
          axisLabel: {
            formatter: function (value: string) {
              return value
              // const srt = value.split('-')
              // return srt[0] + '-' + srt[1]
            }
          }
        }
      ],
      yAxis: [
        {
          name: ['', ''],
          position: ['left', ''],
          splitLine: {
            show: false
          },
          nameTextStyle: {
            color: 'transparent'
          }
        }
      ],
      grid: {
        top: 35,
        bottom: 100,
        right: 10
      },
      series: [
        {
          type: ['line', 'line', 'line', 'line', 'line'],
          label: {
            show: false
          },
          symbolSize: 7, //折线点的大小
          smooth: false,
          connectNulls: true,
          itemStyle: {
            color: ['#5dec9d', '#ea68a2', '#1da7ff', '#ec6941', '#ffba0a']
          },
          areaStyle: {
            opacity: 0
          }
        }
      ],
      dataZoom: {
        show: true,
        type: 'slider',
        start: 50,
        end: 100,
        width: '84%',
        left: '7.3%',
        bottom: 0,
        height: 15,
        borderColor: '#166beb',
        handleStyle: {
          color: '#166beb',
          borderColor: '#166beb',
          borderWidth: 4
        },
        moveHandleSize: 10,
        moveHandleStyle: {
          color: '#166beb'
        },
        textStyle: {
          color: '#00c6ff'
        },
        emphasis: {
          handleStyle: {
            color: '#00c6ff',
            borderColor: '#00c6ff',
            borderWidth: 4
          },
          moveHandleStyle: {
            color: '#00c6ff'
          }
        }
      }
    },
    event: {}
  },
  getData: () => {
    data.params.loading = true
    httpRequest
      .get({
        url: 'M2P2ZDQYLine',
        params: { classId: '售电企业市场平均交易价格' }
      })
      .then((res) => {
        if (res.code == 200 && Object.keys(res.map).length > 0) {
          data.params.map = res.map
          data.params.options.yAxis[0].min = res.min || 0
          data.params.options.dataset.dimensions = [
            'name',
            ...Object.keys(res.map)
          ]
          data.params.options.yAxis[0].name = res.unit
          data.params.options.dataset.source = res.data
          data.title = res.title
          data.unit = '元/千瓦时'
          data.title = '部分行业电量电价'
          data.params.loading = false
        }
      })
      .catch(() => {
        console.log('请求失败')
      })
  }
})
const handImgClick = () => {
  data.visible = true
  emits('change', true)
  // const dDialogRef = ref()
}
const handBtnClose = () => {
  data.visible = false
  emits('change', false)
}
onMounted(() => {
  getData()
})
const refreshData = () => {
  getData()
}
defineExpose({
  refreshData
})
</script>
<style lang="less" scoped>
.mask {
  opacity: 0.4;
}
.title {
  position: relative;
  z-index: 1;
  font-size: 20px;
  color: #def1ff;
  line-height: 45px;
  text-align: center;
  background: url('../../../../components/comBox/img/box-title-bg.png')
    no-repeat center;
}
.nav {
  height: 30%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 5px;
  // background-color: rgba(33, 122, 255, 0.1);
  .echart-item {
    width: 100%;
  }
  .box-bar {
    height: 100%;
    padding: 7px 30px 7px 15px;
    position: relative;
    .jgdb-unit {
      position: absolute;
      font-size: 14px;
      font-weight: bold;
      color: rgb(70, 237, 232);
      top: 0;
      left: 7px;
    }
    .jgdb-img {
      position: absolute;
      top: -20px;
      left: 7px;
    }
  }
  ::v-deep(.com-box .slot-box) {
    height: calc(100% - 55px);
  }
}
</style>
